Namespace("sketch.ui.iphone");

(function(ui) {
    var fwk = sketch.framework;

    var PickerColumn = klass(fwk.Container, (function() {
        return {
            _callSuper:false,
            _constructor:function() {
                PickerColumn.SuperConstructor.call(this, true);
                this.margin(new fwk.Box(1, 0, 1, 0));
                this._stack = new ui.common.StackPanel();
                this._stack.bindToSize(this.sizeProperties());
                this._stack.orientation("vertical");
                this._stack.canSelect(false);
                this._stack.padding(new fwk.Box(0, 0, 5, 0));
                this._stack.top(78);
                this.canSelect(false);
                this.SuperKlass.add.call(this, this._stack);
                this.items = [];
                this._selectedIndex = 0;
            },
            addItem:function(value) {
                var label = new ui.iphone.Label();

                var font = label.font();
                font.size(18);
                font.bold(true);
                font.family('arial');
                font.lineHeight(39);
                label.canSelect(false);

                label.verticalAlign("middle");

                label.text(value);
                this.addItemElement(label);
            },
            addItemElement:function(element) {
                element.height(39);
                element.margin(new fwk.Box(5, 0, 0, 0));
                this._stack.add(element);
                this.items.push(element);
            },
            selectedIndex:function(index) {
                this._selectedIndex = index;
                this._stack.top(78 - index * 39);
            },
            drawSelf:function(context) {
                var x = this.left(),
                    y = this.top(),
                    width = this.width(),
                    height = this.height();

                context.save();
                context.fillStyle = '#CACBDD';
                context.fillRect(x, y, width, height);

                context.fillStyle = '#FDFDFD';
                context.fillRect(x + 3, y, width - 6, height);

                context.restore();
                PickerColumn.Super.drawSelf.call(this, context);
            },
            add: function(element){
                this._stack.add(element);
            },
            remove: function(element){
                this._stack.remove(element);
            },
            clear: function(){
                this._stack.clear();
            },
            getChildren: function(){
                return this._stack.getChildren();
            }
        };
    })());

    var INNER_OFFSET = 9;
    ui.iphone.Picker = klass(fwk.Container, (function() {
        return {
            __type__:"ui.iphone.Picker",
            _callSuper:false,
            _constructor:function() {
                ui.iphone.Picker.SuperConstructor.call(this, true);
                this.width(320);
                this.height(215);
                this._background = fwk.Resources["picker_background"];
                this._border = fwk.Resources["picker_border"];
                this._shadow = fwk.Resources["picker_shadow"];
                this._glass = fwk.Resources["picker_glass"];
                this._innerBackground = '#0A0B0B';//'#C3C1D6';
                this._columns = [];

                this._stack = new ui.common.StackPanel();
                this._stack.width(301);
                this._stack.height(196);
                this._stack.left(9);
                this._stack.top(10);
                this._stack.padding(new fwk.Box(0, 0, 0, 0));
                this._stack.canSelect(false);
                this._stack.orientation("horizontal");
                this._stack.verticalAlignment("center");

                this.addColumn();
                this.add(this._stack);
            },
            addColumn:function() {
                var column = new PickerColumn();
                column.width(this._stack.width());
                this._columns.push(column);
                this._stack.add(column);
                return column;
            },
            drawSelf:function(context) {
                var x = this.left(),
                    y = this.top(),
                    width = this.width(),
                    height = this.height();
                // draw background
                context.fillStyle = this._background.toBrush(context, 0, y, 0, y + height);
                context.fillRect(x, y, width, height);

                // draw light back inside
                context.strokeStyle = this._border.toBrush(context, 0, y + INNER_OFFSET, 0, y + height - 2 * INNER_OFFSET);
                context.fillStyle = this._innerBackground;
                context.roundedRectPath(x + INNER_OFFSET, y + INNER_OFFSET, width - 2 * INNER_OFFSET, height - 2 * INNER_OFFSET, 6, 6);
                context.fill();
                context.stroke();

                context.roundedRectPath(x + INNER_OFFSET, y + INNER_OFFSET, width - 2 * INNER_OFFSET, height - 2 * INNER_OFFSET, 6, 6);
                context.clip();
                ui.iphone.Picker.Super.drawSelf.call(this, context);
                // draw shadow
                var gradient = context.createLinearGradient(0, y + INNER_OFFSET, 0, y + height - 2 * INNER_OFFSET);
                gradient.addColorStop(0, 'rgba(0,0,10,0.8)');
                gradient.addColorStop(0.25, 'rgba(0,0,10,0.05)');
                gradient.addColorStop(0.5, 'rgba(0,0,10,0)');
                gradient.addColorStop(0.75, 'rgba(0,0,10,0.05)');
                gradient.addColorStop(1, 'rgba(0,0,10,0.8)');
                context.fillStyle = gradient;

                context.roundedRectPath(x + INNER_OFFSET, y + INNER_OFFSET, width - 2 * INNER_OFFSET, height - 2 * INNER_OFFSET, 6, 6);
                context.fill();

                var cy = y + height / 2;
                context.fillStyle = this._glass.toBrush(context, 0, cy - 22, 0, cy + 22);
                context.fillRect(x + INNER_OFFSET, cy - 22, x + width - INNER_OFFSET, 44);
            },
            addItem:function(value, column) {
                var column = column || 0;
                this._columns[column].addItem(value);
            },
            addItemElement:function(element, column) {
                var column = column || 0;
                this._columns[column].addItemElement(element);
            },
            selectedIndex:function(index, column) {
                var column = column || 0;
                this._columns[column].selectedIndex(index);
            },
            setColumnWidth:function(index, value) {
                this._columns[index].width(value);
            },
            clone: function(){
                var clone = this.shallowCopy();
                clone._columns = [];
                clone._stack.clear();

                for (var i = 0, len = this._columns.length; i < len; ++i) {
                    var column = this._columns[i];
                    var cloneColumn = clone.addColumn();
                    cloneColumn.width(column.width());
                    cloneColumn.selectedIndex(column._selectedIndex);
                    for (var j = 0, k = column.items.length; j < k; ++j) {
                        var item = column.items[j];
                        cloneColumn.addItemElement(item.clone());
                    }
                }
                return clone;
            }
        };
    })());

    ui.iphone.DateTimePicker = klass(ui.iphone.Picker, (function() {
        var addDateItem = function(day, date) {
            var stackPanel = new ui.common.StackPanel();
            stackPanel.orientation('horizontal');
            stackPanel.canSelect(false);
            stackPanel.height(39);

            var label1 = new ui.iphone.Label();
            label1.text(day);
            label1.width(60);

            var font = label1.font();
            font.size(18);
            font.bold(true);
            font.family('arial');
            font.lineHeight(39);
            font.color("#8A8A8A");
            label1.textAlign("right");
            label1.canSelect(false);
            label1.verticalAlign('middle');
            label1.margin(new fwk.Box(0, 0, 6, 0));

            var label2 = new ui.iphone.Label();
            label2.text(date);
            font = label2.font();
            font.size(18);
            font.bold(true);
            font.family('arial');
            font.lineHeight(39);

            label2.canSelect(false);
            label2.verticalAlign('middle');

            stackPanel.add(label1);
            stackPanel.add(label2);
            this.addItemElement(stackPanel, 0);
        };

        var addToday = function(value) {
            var label1 = new ui.iphone.Label();
            label1.text(value);

            var font = label1.font();
            font.size(18);
            font.bold(true);
            font.family('arial');
            font.lineHeight(39);
            font.color("#3073E2");
            label1.textAlign("right");
            label1.canSelect(false);
            label1.verticalAlign('middle');
            label1.margin(new fwk.Box(0, 0, 6, 0));
            this.addItemElement(label1, 0);
        };
        return {
            _constructor:function() {
                this.addColumn();
                this.addColumn();
                this.addColumn();
                this.setColumnWidth(0, 150);
                this.setColumnWidth(1, 48);
                this.setColumnWidth(2, 48);
                this.setColumnWidth(3, 48);
                this._stack.arrange();

                addDateItem.call(this, "Thu", 'Aug 4');
                addDateItem.call(this, "Fri", 'Aug 5');
                addToday.call(this, 'Today');
                addDateItem.call(this, "Sun", 'Aug 7');
                addDateItem.call(this, "Mon", 'Aug 8');
                this.selectedIndex(2, 0);

                for (var i = 0; i <= 12; ++i) {
                    this.addItem(i.toString(), 1);
                }

                this.addItem('00', 2);
                this.addItem('20', 2);
                this.addItem('40', 2);

                this.addItem('AM', 3);
                this.addItem('PM', 3);
            }
        }
    })());
})(sketch.ui);